<template>
  <div class="main">
    <basic-layout title="出入保证卡申请" :showAddBtn="false" class="wrapBox">
      <van-form ref="form" class="vanForm">

        <van-field readonly
                   clickable
                   required
                   name="picker"
                   :value="formDataLabel.centerNameLabel"
                   label="访客中心名称"
                   placeholder="点击选择访客中心名称"
                   :rules="ruleForm.centerNameLabel"
                   @click="showCenter = true"/>

        <van-field readonly
                   clickable
                   required
                   name="picker"
                   :value="formDataLabel.cardTypeLabel"
                   label="卡类型"
                   placeholder="点击选择卡类型"
                   :rules="ruleForm.cardTypeLabel"
                   @click="showCardType = true"/>

        <van-field readonly
                   clickable
                   required
                   name="picker"
                   :value="formData.validDate"
                   label="门禁卡有效时间"
                   placeholder="点击选择门禁卡有效时间"
                   @click="showValidDate = true"
                   :rules="ruleForm.validDate"/>

        <van-field v-model="formData.applntPhone"
                   required
                   label="申请人电话"
                   name="申请人电话"
                   placeholder="请输入申请人电话"
                   :rules="ruleForm.applntPhone"/>

        <van-field v-model="formData.appReason"
                   label="办卡理由"
                   rows="3"
                   autosize
                   type="textarea"
                   maxlength="256"
                   placeholder="请输入办卡理由"
                   show-word-limit
                   :rules="ruleForm.appReason"/>

        <van-contact-card type="add" @click="onAdd" add-text="增加申请人"/>

        <div v-if="visitorsCardAppDetailSaveList.length > 0">
          <div v-for="(item, index) in visitorsCardAppDetailSaveList" class="fContentMain">
            <div @click="openCheckItemFormEdit(item)">

              <div class="contentCC">
                <div class="textContent">
                  <div class="title">
                    <div>姓名</div>
                    <div>{{ item.name }}</div>
                  </div>
                  <div class="title">
                    <div>性别</div>
                    <div>{{ item.sexLabel }}</div>
                  </div>
                  <div class="title">
                    <div>联系电话</div>
                    <div>{{ item.phone }}</div>
                  </div>
                  <div class="title">
                    <div>身份证号码</div>
                    <div>{{ item.certNo }}</div>
                  </div>
                  <div class="title">
                    <div>所属公司</div>
                    <div>{{ item.company }}</div>
                  </div>
                </div>
                <div class="picMain">
                  <div class="pic">
                    <div @click.stop.prevent="() => delItem(index)" class="del"/>
                    <div>
                      <img :src="item.fileList[0].url" style="width: 100%;height: 100%">
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>


      </van-form>


      <van-button class="defaultBtn" size="large" color="#4eb3e9" @click=" onSubmit ">提交</van-button>
<!--      <div class="foot">-->
<!--        <van-button class="button"-->
<!--                    round-->
<!--                    type="primary"-->
<!--                    block-->
<!--                    @click="onSubmit">-->
<!--          提交-->
<!--        </van-button>-->
<!--      </div>-->
    </basic-layout>

    <van-popup v-model="showCenter" position="bottom">
      <van-picker title="请选择访客中心"
                  show-toolbar
                  :columns="visiCenterList"
                  @confirm="selCenter"
                  @cancel="showCenter = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.title }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <van-popup v-model="showCardType" position="bottom">
      <van-picker title="请选择卡类型"
                  show-toolbar
                  :columns="cardTypeList"
                  @confirm="selCardType"
                  @cancel="showCardType = false">
        <template #option="option">
          <div style="display: flex; flex-direction: column; align-items: center;">
            <div>{{ option.valueAlias }}</div>
          </div>
        </template>
      </van-picker>
    </van-popup>

    <van-calendar v-model="showValidDate"
                  :min-date="minDate"
                  :max-date="maxDate"
                  type="single"
                  @confirm="selValidDate"/>

    <!--  -->
    <fullscreenModal
      :modal="fullscreenModal"
      :editType="'other'"
      label="增加申请人"
      :showSave="true"
      @handleClose="fullscreenModal = false"
      @handleSave="$refs.checkItemForm.handleSave()"
    >
      <checkItem-form
        @close="fullscreenModal = false"
        @handleCheckRefresh="checkRefresh"
        @handleEdit="handleEdit"
        ref="checkItemForm"
      />
    </fullscreenModal>

    <fullLoading v-if="loading"></fullLoading>
  </div>
</template>
<script>
import {queryDic, uploadAttach} from "@/api/common";
import staffList from "@/views/srvAssurance/convaccess/appointmentVisit/staffList";
import {queryInterviewerByCorpIdListSelect, getVisitorsCenterSelect} from "@/api/srvAssurance/visitorsCardApp/visitorsCenter";
import {add} from "@/api/srvAssurance/visitorsCardApp/visitorsCardApp";
import checkItemForm from "./checkItemForm";


export default {
  name: 'index',
  props: {},
  components: {
    staffList,
    checkItemForm,
  },
  data() {
    return {
      accept: '.png,.jpg,.jpeg',
      maxSize: 51200, // 文件最大：50M
      fileList: [],
      loading: false,

      formData: {
        centerId: '',
        cardType: '',
        validDate: null,
        applntPhone: '',
        appReason: '',
      },
      formDataLabel: {
        centerNameLabel: '',
        cardTypeLabel: '',
      },

      visitorsCardAppDetailSaveList: [],
      visitorsCardAppDetailSave: {
        name: '',
        sex: '',
        certNo: '',
        phone: '',
        company: '',
        photo: '',
      },

      // 必填项校验
      ruleForm: {
        // centerNameLabel: [
        //   {required: true, message: '请选择访客中心', trigger: 'blur'},
        // ],
        cardTypeLabel: [
          {required: true, message: '请选择访客卡类型', trigger: 'blur'},
        ],
        validDate: [
          {required: true, message: '请选择有效期', trigger: 'blur'},
        ],
        applntPhone: [
          {required: true, message: '请输入申请人电话', trigger: 'blur'},
          {
            pattern: this.$commonReg.phoneReg,
            message: this.$commonReg.phoneMsg,
            trigger: 'blur',
          },
        ],
        appReason: [
          {required: false, message: '请输入办卡理由', trigger: 'blur'},
        ],
      },
      showCenter: false,
      visiCenterList: [],
      showCardType: false,
      cardTypeList: [],
      showValidDate: false,
      fullscreenModal: false,
      minDate: new Date(),
      maxDate: new Date(new Date().getFullYear(), 11, 31),
    }
  },
  created() {
    this.resetForm();
    this.initData();
  },
  computed: {},
  mounted() {
  },
  methods: {
    // // 附件上传之前（进行附件大小、类型验证）
    // uploadBefore(file) {
    //   let format = this.accept.replace(/\./g, '').split(",");
    //   if ((file.size / 1000) > this.maxSize) {
    //     this.$Notify({type: "warning", message: `文件大小不能超过${(this.maxSize / 1024)}M!`});
    //     return false;
    //   } else if (!format.includes((file.name.split('.')[file.name.split('.').length - 1]).toLowerCase())) {
    //     this.$Notify({type: "warning", message: '文件格式有误,请上传' + format.join('、') + '格式文件！'});
    //     return false;
    //   }
    //   uploadAttach(file).then(res => {
    //     if (res.code === 1000 && res.data) {
    //       this.fileList.push({url: res.data.url});
    //       this.formData.fileCodeArr.push(res.data.fileCode);
    //     }
    //   })
    // },
    // // 文件删除前的
    // onDel(file, obj) {
    //   this.fileList.splice(obj.index, 1);
    //   this.formData.fileCodeArr.splice(obj.index, 1);
    // },

    // 提交
    onSubmit() {
      // 全局表单验证
      this.$refs.form.validate().then(async () => {
        if (this.visitorsCardAppDetailSaveList.length == 0) {
          this.$Notify({type: 'warning', message: '请添加申请人！'});
          return;
        }
        this.loading = true;
        let obj = {...this.formData};
        obj.visitorsCardAppDetailSaveList = [];
        this.visitorsCardAppDetailSaveList.forEach(item => {
          let param = {
            certNo: item.certNo,
            company: item.company,
            name: item.name,
            phone: item.phone,
            photo: item.photo,
            sex: item.sex
          }
          obj.visitorsCardAppDetailSaveList.push(param);
        })
        this.loading = false;
        add(obj).then((res) => {
          if (res.code === 1000) {
            this.$Notify({type: 'success', message: '保存成功！'});
            this.$router.go(-1);
          }
        });
      }).catch(() => {
        this.loading = false;
      })
    },

    resetForm() {
      this.formData = {
        centerId: '',
        cardType: '',
        validDate: null,
        applntPhone: '',
        appReason: '',
      };
      this.formDataLabel = {
        centerNameLabel: '',
        cardTypeLabel: '',
      };
      this.visitorsCardAppDetailSaveList = [];
      this.visitorsCardAppDetailSave = {};
      this.fileList = [];
      this.showCenter = false;
      this.showCardType = false;
      this.showValidDate = false;
      this.showSex = false;
      setTimeout(() => {
        this.$refs.form.resetValidation();
      });
    },

    selCenter(val) {
      this.formData.centerId = val.value;
      this.formDataLabel.centerNameLabel = val.title;
      this.showCenter = false;
    },

    selCardType(val) {
      this.formData.cardType = val.value;
      this.formDataLabel.cardTypeLabel = val.valueAlias;
      this.showCardType = false;
    },

    selValidDate(val) {
      this.formData.validDate = new Date(val).format('yyyy-MM-dd');
      this.showValidDate = false;
    },

    onAdd() {
      this.fullscreenModal = true;
      this.$refs.checkItemForm.resetForm();
    },

    checkRefresh(data) {
      data.index_temp = this.visitorsCardAppDetailSaveList.length + 1;
      this.visitorsCardAppDetailSaveList.push(data);
    },

    handleEdit(data) {
      this.visitorsCardAppDetailSaveList.forEach((item, index) => {
        if (item.index_temp === data.index_temp) {
          this.visitorsCardAppDetailSaveList.splice(index, 1, data);
        }
      });
    },

    delItem(index) {
      this.visitorsCardAppDetailSaveList.splice(index, 1);
    },

    openCheckItemFormEdit(item) {
      this.fullscreenModal = true;
      this.$refs.checkItemForm.getData(item);
    },

    // selAppType(val) {
    //   if (val.value === '1') {
    //     this.formData.corpId = this.userBack.corpId;
    //     this.formData.applnt = this.userBack.name;
    //     this.formData.applntPhone = this.userBack.phone;
    //     this.formData.occEmployer = this.userBack.corpName;
    //   } else {
    //     this.formData.occEmployer = '';
    //     this.formData.corpId = '';
    //   }
    //   this.formData.appTypeLabel = val.valueAlias;
    //   this.formData.appType = val.value;
    //   this.showAppType = false;
    // },
    //
    // selOccJobTitle(val) {
    //   this.formData.occJobTitle = val.value;
    //   this.formData.occJobTitleLabel = val.valueAlias;
    //   this.showOccJobTitle = false;
    // },
    //
    // selLeaseTime(val) {
    //   const [start, end] = val;
    //   this.formData.leaseBeginTime = new Date(start).format('yyyy-MM-dd');
    //   this.formData.leaseEndTime = new Date(end).format('yyyy-MM-dd');
    //   this.formData.leaseTime = `${this.formData.leaseBeginTime} 至 ${this.formData.leaseEndTime}`;
    //   this.showLeaseTime = false;
    // },

    // validateOcc(value) {
    //   if (this.occObjBack.occ !== value) {
    //     this.selUser = false;
    //     this.formData.occId = '';
    //     this.formData.corpId = '';
    //   } else {
    //     this.selUser = true;
    //     this.formData.occId = this.occObjBack.occId;
    //     this.formData.occEmployer = this.occObjBack.occEmployer;
    //     this.formData.corpId = this.occObjBack.corpId;
    //     this.formData.occPhone = this.occObjBack.occPhone;
    //   }
    //   if (!value) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    // },
    //
    // validateLeaseTime(value) {
    //   if (!value) {
    //     return false;
    //   } else {
    //     return true;
    //   }
    // },
    //
    // // 选择入住人
    // getStaffInfo(item) {
    //   this.formData.occ = '';
    //   this.formData.occId = '';
    //   this.occObjBack = {
    //     occId: '',
    //     occ: '',
    //     occPhone: '',
    //     corpId: '',
    //     occEmployer: '',
    //   };
    //   if (item) {
    //     this.selUser = true;
    //     let obj = item;
    //     this.formData.occId = obj.staffId;
    //     this.formData.occ = obj.name;
    //     this.formData.occEmployer = obj.corpName;
    //     this.formData.corpId = obj.corpId;
    //     this.formData.occPhone = obj.mobile;
    //
    //     this.occObjBack.occId = obj.staffId;
    //     this.occObjBack.occ = obj.name;
    //     this.occObjBack.corpId = obj.corpId;
    //     this.occObjBack.occEmployer = obj.corpName;
    //     this.occObjBack.occPhone = obj.mobile;
    //   }
    // },

    // reset() {
    //   this.formData = {
    //     turnroomApplyId: '',
    //     applyNo: '',              // 申请编号
    //     appTime: '',              // 申请时间
    //     appType: '1',             // 申请类型(本人申请、代他人申请)
    //     appTypeLabel: '本人申请',             // 申请类型(本人申请、代他人申请)
    //     leaseTime: null,          // 租赁时间
    //     leaseBeginTime: null,     // 租赁开始时间
    //     leaseEndTime: null,       // 租赁结束时间
    //     houseRequirement: '',     // 房屋需求
    //     appStatus: '',            // 申请状态
    //     occId: '',                // 入住人标识
    //     occ: '',                  // 入住人
    //     occPhone: '',             // 入住人电话
    //     occJobTitle: '',           // 入住人职务
    //
    //     fileCodeArr: [],
    //   };
    //   // this.$refs.form.resetFields();
    //
    //   setTimeout(() => {
    //     this.$refs.form.resetValidation();
    //   });
    // },


    // initUserInfo() {
    //   queryUserInfo().then(res => {
    //     if (res.code === 1000 && res.data) {
    //       this.userBack.corpId = res.data.corpId;
    //       this.userBack.corpName = res.data.corpName;
    //       this.userBack.name = res.data.name;
    //       this.userBack.phone = res.data.phone;
    //       this.userBack.staffId = res.data.staffId;
    //
    //       this.formData.corpId = res.data.corpId;
    //       this.formData.applnt = res.data.name;
    //       this.formData.applntPhone = res.data.phone;
    //       this.formData.occEmployer = res.data.corpName;
    //     }
    //     this.$forceUpdate();
    //   });
    // },

    // 下拉框数据
    initData() {
      queryDic("SA_VISITORS_CARD_TYPE_CODE").then((res) => {
        if (res.code == 1000) {
          this.cardTypeList = res.data;
        }
        getVisitorsCenterSelect("").then(res => {
          this.visiCenterList = res.data;
        })
      });
    },

  },
}
</script>
<style lang="less" scoped>
.vanForm {
  overflow-y: auto;
  margin-bottom: 15px;

  .sqr {
    padding: 16px;
    position: relative;

    &:before {
      position: absolute;
      left: 0.21333rem;
      color: #ee0a24;
      font-size: 0.37333rem;
      content: '*';
    }

    &:after {
      position: absolute;
      box-sizing: border-box;
      content: ' ';
      pointer-events: none;
      right: 0.42667rem;
      bottom: 0;
      left: 0.42667rem;
      border-bottom: 0.02667rem solid #ebedf0;
      -webkit-transform: scaleY(.5);
      transform: scaleY(.5);
    }

    .picStyle {
      padding: 16px 0px 16px 0px !important;
    }

  }


  .fContentMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(254, 255, 255);
    color: rgb(51, 51, 51);
    border: 0.1px solid rgb(220, 223, 230);
    border-radius: 6px;
    margin: 10px;
    padding: 10px;

    .contentCC {
      display: flex;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      //flex-direction: column;
      justify-content: space-between;
      //align-items: flex-end;
      align-items: stretch;

      .textContent {
        flex: 4 1 0%;

        .title {
          display: flex;
          width: 90%;
          padding: 5px 0px 5px 10px;

          div:first-child {
            width: 100px;
            color: #878888;
          }

          div:last-child {
            width: ~'calc(100% - 100px)';
            word-break: break-all;
          }

        }
      }

      .picMain {
        flex: 1 1 0%;

        .pic {
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: flex-end;
          justify-content: space-between;
        }
      }
    }


    .contentC {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      flex-direction: column;
      justify-content: space-between;

      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }
    }
  }
}


.foot {
  position: absolute;
  width: 100%;
  background: #ffffff;
  padding: 10px 0;
  right: 0px;
  bottom: 0px;
  height: 45px;
  z-index: 1;

  .button {
    color: #ffffff;
    border-radius: 20px;
    height: 45px;
    line-height: 45px;
    width: 120px;
    font-size: 17px;
    width: 80%;
    margin-left: 10%;
  }
}


.del {
  background-image: url('../../../../assets/images/del.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  height: 20px;
  width: 20px;
}
</style>
